<template>
  <div>
    <h1>Mitt子组件</h1>
    <h2>我的玩具: {{ myToy }}</h2>

    <el-button @click="handleClick">将我的玩具给父节点</el-button>


    <h2>父组件给我的玩具: {{ fromParentToy }}</h2>
  </div>
</template>
<script lang="ts" setup>
import { EMittToyEvent, type IMittToy } from '@/types';
import emitter from '@/utils/emitter';
import { onUnmounted, ref } from 'vue';
const myToy = ref<string>('小轮船')
const fromParentToy = ref<string>('')

function handleClick() {
  emitter.emit(EMittToyEvent.MITT_CHILD_MYTOY, {
    name: myToy.value,
  } as IMittToy)
}

emitter.on(EMittToyEvent.MITT_PARENT_MYTOY, (data) => {
  fromParentToy.value = (data as IMittToy).name
})


onUnmounted(() => {
  emitter.off(EMittToyEvent.MITT_PARENT_MYTOY)
})

</script>
<style lang="scss" scoped></style>
